<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>
<body>
    layui 是一个UI组件库，类似于 bootstrap。组件：提前定义好样式、事件的标签
    layui 1. 样式好看   2. 类名突出
clas
    <button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" class="layui-btn">默认按钮</button>
    <button type="button" class="layui-btn layui-btn-normal"">百搭按钮</button>
    <button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>

    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15 item">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        卡片式面板面板通常用于非白色背景色的主体内<br>
                        从而映衬出边框投影
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        结合 layui 的栅格系统<br>
                        轻松实现响应式布局
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">标题</div>
                    <div class="layui-card-body">
                        内容
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="../lib/layui/layui.js"></script>
<!-- <script src="../lib/layui/layui.all.js"></script> -->
<script>
    /* layui 是一个使用模块化封装的js库
        使用方法：
            1. 模块方式：引入 layui.js，使用某个模块需要使用layui.use(模块名, 回调函数)   异步过程
            2. 全模块引入：引入 layui.all.js 引入所有的模块，这样layui封装任何对象都可以直接使用
    */
    // form 表单模块 table 数据表格 layer 弹窗模块

    // 使用单模块的方式 layui.use('模块1', function(){})
    layui.use('table', function () {
        var table = layui.table;
        console.log(table);
    })

    // 多个模块一起引入 layui.use(['模块1', '模块2'], function(){})
    layui.use(['form', 'layer'], function () {
        console.log(layui.form);
        console.log(layui.layer);
    })
    console.log(layui.form); // undefined 且为第一个， 说明layui.use()为异步
    </script>
</html>